<template>
<!--    左侧导航栏  +  顶部  -->
    <div class="homeNav">

        <div :class="{left:true, left_active:isCollapse}">
            <el-menu default-active="1-4-1" class="el-menu-vertical-demo"
                     background-color="#304156" text-color="#ffffff"
                     @open="handleOpen" @close="handleClozse" :collapse="isCollapse">

                <el-submenu v-for="(items, key, i) in NavList" :key="key" :index="i+''">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{key}}</span>
                    </template>
                    <el-menu-item-group v-if="items.length > 0">
                        <el-menu-item v-for="(item,j) in items" :key="j"
                                      @click="getInfmation(key, item, j)">
                            {{item}}
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </div>

<!--        右侧顶部  -->
        <div :class="{right_top:true, active:isCollapse}">
            <div class="button" @click="showAction">
                <i v-if="isCollapse" class="el-icon-s-unfold"></i>
                <i v-else class="el-icon-s-fold"></i>
            </div>
            <div class="textinforma">
                <p>{{titleArr[0]}}</p>
                <p><span v-if="titleArr.length != 1">/</span>{{titleArr[1]}}</p>
            </div>
        </div>
        <div :class="{next:true, active:isCollapse}">
            <ul>
                <li v-for="(item, i) in orderList">
                    {{item}}
                </li>
            </ul>
        </div>

        <div :class="{comment:true, active:isCollapse}">
            <router-view></router-view>
        </div>
    </div>


</template>

<script>
    export default {
        name: "LeftNav",
        data: function () {
            return {
                NavList:{
                    '小区管理':[],
                    '帮买取快递废品回收':['门店管理', '驿站管理','商品管理', '订单管理', '废品回收订单'],
                    '胖虎甄选':['商品管理', '订单管理', '售后订单'],
                    '胖虎家政':['家政服务', '订单管理', '售后订单'],
                    '用户管理':[],
                    '骑手管理':[],
                    '家政管理':['111','222','333'],
                    '新用户红包':[],
                    '类目管理':[],
                },
                isCollapse: false,
                firstTitle: '', // 一级标题,例如'小区管理'
                nextTitle: '', // 二级标题, 例如'门店管理'
                titleArr: ['小区管理'], // 标题展示数组 用于右侧展示
                orderList: ['小区管理'], // 历史查看记录
                routerArr: {
                    '小区管理': "/community",
                    "帮买取快递废品回收": {
                        '门店管理': "/bangmai/store",
                        '驿站管理': "/bangmai/station",
                        '商品管理': "/bangmai/product",
                        '订单管理': "/bangmai/order",
                        '废品回收订单': "/bangmai/waste",
                    },
                    '胖虎甄选': {
                        '商品管理':"/zhengxuan/product",
                        '订单管理':"/zhengxuan/order",
                        '售后订单':"/zhengxuan/sales"
                    },
                    // '废品回收订单': "",
                }
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
                this.firstTitle = Object.keys(this.NavList)[key];
                if(this.NavList[this.firstTitle].length == 0){
                    this.titleArr = [this.firstTitle];
                //    无二级标题, 直接跳转页面
                    let router = this.routerArr[this.firstTitle]
                    this.$router.push(router).catch(()=>{})
                }
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            getInfmation(key, title, j){
                this.firstTitle = key;
                this.nextTitle = title;
                this.titleArr = [];
                this.titleArr.push(this.firstTitle)
                this.titleArr.push(this.nextTitle)
                // 路由跳转
                let array = this.routerArr[this.firstTitle];
                let router = array[this.nextTitle];
                this.$router.push(router).catch(()=>{})
            },
            showAction(){
                this.isCollapse = !this.isCollapse;
            },
        }
    }
</script>

<style scoped>
    .homeNav{
        width: 100%;
        position: relative;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 220px;
        min-height: 400px;
        /*background-color: #dbb4b4;*/
    }
    .left{
        width: 220px;
        height: 100%;
        background-color: #304156;
        /*height: 1100px;*/
        /*background-color: #1E9FFF;*/
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
    }
    .right_top{
        width: 1105px;
        /*background-color: rosybrown;*/
        height: 50px;
        box-shadow: 0 2px 0 0 #eeeeee;
        position: absolute;
        top: 0;
        left: 220px;
    }

    .right_top .button{
        width: 50px;
        height: 50px;
        /*background-color: #1E9FFF;*/
    }

    .button i{
        font-size: 20px;
        position: absolute;
        top: 15px;
        left: 15px;
    }
    .textinforma{
        height: 50px;
        line-height: 50px;
        margin-left: 10px;
        position: absolute;
        top: 0;
        left: 50px;
        /*background-color: #e5a5ff;*/
    }
    .textinforma p, .textinforma span{
        float: left;
    }
    .textinforma span{
        margin: 0 10px;
    }
    .next{
        width: 1105px;
        height: 30px;
        box-shadow: 0 2px 0 0 #dddddd;
        /*background-color: #2D93CA;*/
        position: absolute;
        top: 50px;
        left: 220px;
    }
    .next ul li{
        width: 75px;
        height: 20px;
        border: 1px solid #dddddd;
        border-radius: 2px;
        margin: 5px;
        font-size: 12px;
        line-height: 20px;
        padding-left: 5px;
        background-color: #44b017;
        color: white;
    }

    .comment{
        width: 1105px;
        position: absolute;
        top: 80px;
        left: 220px;
    }


    .left_active{
        width: 64px;
        transition: all .3s linear;
    }
    .active{
        width: 1260px;
        left: 65px;
        transition: all .3s linear;
    }

</style>